<template>
  <view class="waterfall-item">
    <!-- 增加加载中状态和错误处理 -->
    <view v-if="isLoading" class="image-placeholder">
      <text>加载中...</text>
    </view>
    <view v-if="loadError" class="image-error">
      <text>图片加载失败</text>
    </view>

    <image :src="imageUrl" :style="{ maxWidth: columnWidth + 'px' }" mode="widthFix" class="item-image"
      @load="onImageLoaded" @error="onImageError" alt="作品图片" v-if="!loadError">
    </image>
    <view class="item-info">
      <view class="avatr-container">
        <image class="avatr" :src="avatr"></image>
        <view style="display: flex;flex-direction: column;">


          <text class="item-author">{{ author }}</text>
          <text class="item-title">{{ title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    author: {
      type: String,
      required: true
    },
    avatr: {
      type: String,
      required: true
    },
    columnWidth: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      isLoading: true,
      loadError: false
    }
  },
  methods: {
    onImageLoaded(e) {
      this.isLoading = false;
      // 向父组件发送图片加载完成事件，并传递图片高度
      this.$emit('loaded', e.detail.height);
    },
    onImageError() {
      this.isLoading = false;
      this.loadError = true;
      console.error('图片加载失败:', this.imageUrl);
    }
  }
}
</script>

<style scoped>
.waterfall-item {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  max-width: 100%;
  box-sizing: border-box;
  position: relative;

}

.item-image {
  width: 100%;
  display: block;
}

/* 增加占位符和错误状态样式 */
.image-placeholder,
.image-error {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #999;
}

.item-info {
  padding: 5px;
  position: absolute;
  bottom: 0;
  color: #fff;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
  width: 100%;
}

.item-title {
  font-size: 11px;
  display: block;
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.avatr {
  width: 30px;
  height: 30px;
  border-radius: 20%;
}

.avatr-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}


.item-author {
  font-size: 12px;

}
</style>
